
<!DOCTYPE HTML>
<html>
    <head>
        <title>Youniversity</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
        
        <link rel="stylesheet" href="style/style.css"/>
        <script src="js/lib/cordova-1.7.0.js"></script>
        <script src="js/lib/zepto.min.js"></script>
        <script src="js/lib/iscroll.js"></script>


        <script src="js/lib/mobiscroll-2.0.custom.min.js"></script>

        <link rel="stylesheet" href="style/mobiscroll-2.0.custom.min.css"/>

        <script type="text/javascript">

           

            function loaded() {

                $('.date').scroller({
                    preset: 'date',
                    theme: 'android-ics light',
                    display: 'modal',
                    mode: 'scroller',
                    dateFormat: 'dd/mm/yy',
                    dateOrder: 'Dddmmyy',
                    dayNamesShort: ['Dom ', 'Lun ', 'Mar ', 'Mer ', 'Gio ', 'Ven ', 'Sab ']
                });

                $('.time').scroller({
                    preset: 'time',
                    theme: 'android-ics light',
                    display: 'modal',
                    mode: 'scroller',
                    timeFormat: 'HH:ii',
                    timeWheels: 'HHii'
                });


                $('.button')
                    .on('touchstart', function () {
                        $(this).addClass('fake-active');
                    })
                    .on('touchend', function() {
                        $(this).removeClass('fake-active');
                    })
                    .on('touchcancel', function() {
                        $(this).removeClass('fake-active');
                    });

                var allSelects = $('button');
                allSelects.each(function(index, item) {
                                  item.addEventListener('touchstart', function(e) { $(this).addClass("fake-active"); }, false);
                                  item.addEventListener('touchend', function(e) { $(this).removeClass("fake-active"); }, false);
                                  item.addEventListener('touchcancel', function(e) { $(this).removeClass("fake-active"); }, false);
                                });
            }

            //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            document.addEventListener('DOMContentLoaded', loaded, false);

        </script>

    </head>
    <body class="page">
        <nav>
            <ul>
                <li><a href="explore.html"><img src="resources/img/explore.png"></a></li>
                <li><a href="plan.html"><img src="resources/img/plan.png"></a></li>
                <li><a href="personal.html"><img src="resources/img/personal.png"></a></li>
                <li><a href="events.html"><img src="resources/img/events.png"></a></li>
                <li><a href="updates.html"><img src="resources/img/updates.png"></a></li>
            </ul>
        </nav>
        <header>Prenota appuntamento</header>

        <!-- <div id="scrollableframe">
            <div class="scroller"> -->
                <form>
                    <div class="frame">
                        <div class="badge">
                            <img class="picture" src="resources/img/appoint.png">
                            <ul>
                                <li class="title1">Ricevimento</li>
                                <li class="title2">Matteo Ferri</li>
                                <li class="subtitle1">Martedi' 15:00 - 17:00</li>
                                <li class="subtitle2">Studio docente</li>
                            </ul>
                        </div>
                    
                        <br>

                        <ul class="form appointment">
                            <li>Giorno e ora<br>
                                <input class="date" placeholder="Giorno" /> <input class="time" placeholder="Ora" />
                            </li>
                        </ul>
                    </div>
                    <div class="centercontent">
                        <button type="submit" class="button">
                            <span class="icon tick"></span>
                            <span class="label">Prenota</span>
                        </button>
                    </div>
                </form>


        <!--     </div>
        </div> -->

        
        <script src="js/ynv.js"></script>
    </body>
</html>